/*
*作者---杨彬
*
*/
<template>
    <div class="" v-if="productData">
      <header class="detailHeader">
        <p class="product-cn-name" v-text="productData.name">
        </p>
        <p class="product-en-name" v-text="productData.englishName">
        </p>
        <div class="product-car-warp com-div-middle-ab" @click="goCar">
          <img src="../../assets/productCar/productCar.png">
        </div>
        <span class="carNum" v-text="carNum"></span>
        <span :class="{'car-number':carNumber}" v-if = "carNumber" v-text="allSumPrice.num"></span>
      </header>
      <div class="detail-banner">
          <div class="banner-wrap">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="bannerImg in this.bannerurl">
                   <img :src="bannerImg.thumbnail"> 
                </div>
              </div>
              <!-- 分页器 -->
              <div class="swiper-pagination"></div>
            </div>
          </div>
      </div>
      <section class="product-describe">
        <p class="describe-cn" v-html="productData.introduction.split('===')[0]">
        </p>
        <div class="product-material" v-if="productData.introduction.split('===')[1] != ''">
            <p class="title">精选食材</p>
            <p class="product-material-cn"  v-html="productData.introduction.split('===')[1]"></p>
        </div>
        <div class="product-size">
          <div class="size-warp" v-for="(oitem,oindex) in productData.productSpecifications">
            <input type="radio" name="size" :value="oitem" class="size-radio" v-model="selectData">
            <div class="size-button">
              {{oitem.name+productData.specification}}
              <img src="../../assets/productCar/sizeChecked.png">
            </div>
          </div>
          <div class="com-clear-float"></div>
        </div>
        <div class="product-price-wrap">
          <p>
            <span class="product-price-symbol">￥</span><span
            class="product-price-text" v-text="selectData.price.toFixed(2)">
          </span>
          </p>
          <div>
            <p v-if='productData.isCake==1' v-text="sData.produstDetail.justCd[0]"></p>
            <p v-if='productData.isCake==0' v-text="sData.produstDetail.justCd[1]"></p>
            <p v-text="selectData.notice"></p>
            <p v-if='productData.isCake==1'>需提前5小时预订</p>
            <p v-text="'SIZE:'+selectData.size"></p>
            <p v-text="selectData.introduction"></p>
          </div>
          <section class="product-count-wrap  com-div-middle-ab">
            <img src="../../assets/productCar/notminus.png" class="product-count-minus"
                 v-if="allSumPrice.num<=1"><img src="../../assets/productCar/minus.png"
               class="product-count-minus" v-if="allSumPrice.num>1"  @click="toolNumberChange(false,'num')"><span
            class="product-count-text" v-text="allSumPrice.num"></span><img
            src="../../assets/productCar/add.png" class="product-count-add" @click="toolNumberChange(true,'num')">
          </section>
        </div>

      </section>
      <div class="space-div"></div>
      <section class="product-distribute">
        <div class="product-explain" v-for="(sitem,sindex) in sData.produstDetail.flowChartImgArry"
             v-if="sindex==0&&productData.sendTimeIntro||sindex==1&&productData.sendIntro||
               sindex==2&&productData.foodStorage||sindex==3&&productData.announcement">
          <div class="explain-type">
          <img :src="sitem.src"><span v-text="sitem.title"></span>
          </div>
          <div class="explain-content"
               v-html="sindex==0?productData.sendTimeIntro
:(sindex==1?productData.sendIntro:(sindex==2?productData.foodStorage:productData.announcement))">
          </div>
          <section class="com-clear-float"></section>
        </div>
      </section>
      <footer>
        <div class="footer-button" v-if="isOpenMask">
          <button type="button" class="put-in-car"  @click="openMask(true,false)"
                  v-text="sData.produstDetail.footOne[0]"></button><button
          type="button" class="now-buy"   @click="openMask(true,true)"
          v-text="sData.produstDetail.footOne[1]"></button>
        </div>
        <!-- 遮罩层 -->
        <div class="footer-mask-bg" v-if="!isOpenMask"
              :style="{height:windowHeight+'px'}" >
        </div>
        <div class="footer-mask-warp" v-if="!isOpenMask">
          <img class="footer-mask-close" src="../../assets/productCar/maskClose.png"
               @click="openMask(false,'close')">
           <div class="footer-mask" v-if="!isOpenMask">
             <div class="mask-free">
               <p><span v-text="productData.name"></span>
                 <span v-text="alertData[0].name+productData.specification"></span>
               </p>
               <section v-for="(aitem,index) in sData.produstDetail.freeListArr">
                 <div class="mask-free-content"><input
                   type="checkbox" name="free" class="free-checkbox com-div-middle-ab"
                   @click="checkStutusChange(index)" :checked="aitem.checked"><img
                   src="../../assets/productCar/freefail.png"
                   class="freeFailImg"><img
                   src="../../assets/productCar/freeSuccess.png"
                   class="freeSuccessImg"><span v-text="aitem.title"
                 ></span></div>
                 <input type="type" :placeholder="aitem.notice" :maxlength="aitem.length" v-model="aitem.val"
                        v-if="aitem.notice&&aitem.checked&&index==0">
                 <input type="tel" :placeholder="aitem.notice" :maxlength="aitem.length" v-model="aitem.val"
                        onkeyup="this.value=this.value.replace(/\D/g,'')" 
                        onafterpaste="this.value=this.value.replace(/[1-9]\D{0,2}/g,'')"
                        v-if="aitem.notice&&aitem.checked&&index!=0">
                 <div class="com-clear-float"></div>
               </section>
             </div>
             <div class="mask-tool">
               <div class="mask-tool-content"><input
                 type="checkbox" name="free" class="free-checkbox com-div-middle-ab"
                 @click="checkStutusChange(6)" :checked="sData.produstDetail.cakeToolTitle.checked"><img
                 src="../../assets/productCar/freefail.png" class="freeFailImg"><img
                 src="../../assets/productCar/freeSuccess.png"
                 class="freeSuccessImg"><span v-text="sData.produstDetail.cakeToolTitle.title"
               ></span></div>
               <div class="mask-tool-account-warp" v-for="(zitem,zindex) in sData.produstDetail.cakeTool">
                 <span class="mask-tool-name" v-text="zitem.name"></span>
                 <span class="mask-tool-price" v-text="zitem.price"></span>
                 <div class="mask-tool-operation">
                   <img src="../../assets/productCar/toolminus.png" @click="toolNumberChange(false,(zindex==0?'candleNum':'forkNum'))"><span
                   v-text="allSumPrice.candleNum" v-if="zindex==0"></span><span
                   v-text="allSumPrice.forkNum" v-if="zindex==1"></span><img
                   src="../../assets/productCar/tooladd.png"  @click="toolNumberChange(true,(zindex==0?'candleNum':'forkNum'))">
                 </div>
               </div>

             </div>
           </div>
           <div class="mask-sum">
             <span class="mask-sum-cn"
                   v-text="sData.produstDetail.footTwo[0]"></span><span
             class="mask-sum-symol"
             v-text="sData.produstDetail.footTwo[1]"></span><span
             class="mask-sum-numder"
             v-text="allSumPrice.allCalculate()" v-if="sData.produstDetail.cakeToolTitle.checked"></span><span
             class="mask-sum-numder"
             v-text="allSumPrice.calculateNotTool()" v-if="!sData.produstDetail.cakeToolTitle.checked"></span>
             <button type="button"
                     v-text="sData.produstDetail.footTwo[2]" @click="sureNext()"></button>
           </div>
        </div>
      </footer>
    </div>
</template>
<script type="text/javascript" scoped>
require('./../../../static/swiper.js')
require('./../../../static/swiper-3.3.1.min.css')
  export default {
    data(){
      return {
        carNumber: false,
        count: 1,
        isOpenMask: true,//是否不打开mask面板
        windowHeight: 0,
        productData: '',
        selectData: '',
        specificationId:'',
        freeListArr:[],
        allCheckBox:[],
        bannerurl:[],
        nextFnStatue:false,//false加入购物车true立即购买
        allSumPrice:{//创建产品价格管理对象
          price: 0,
          num: 1,
          candleNum: 0,
          forkNum:0,
          calculate(){
            return (this.price*this.num).toFixed(2);
          },
          allCalculate(){
            return (this.candleNum*4+this.price*this.num+this.forkNum*2).toFixed(2);
          },
          toolCalculate(){
            return (this.candleNum*4+this.forkNum*2).toFixed(2);
          },
          calculateNotTool(){
            return (this.price*this.num).toFixed(2);
          },
          init(){
            this.candleNum=0;
            this.forkNum=0;
          }
        },
        alertData:'',
        carNum:''
      }
    },
    props: ['sData'],
    computed: {
    },
    mounted () {
      this.getAjax(this.sData.url.productCar,{userId:this.sData.userId},(res)=>{
        if(res&&res.data){
          var number = 0;
          res.data.forEach((item)=>{
            number += item.number
          })
          this.carNum = number
        }
      })
    },
    methods: {
      goCar(){
        this.$router.push('/productCar');
      },
      toolNumberChange(obool,okey){
        if(obool==false){
          if(this.allSumPrice[okey]==0){
            return;
          }
          this.allSumPrice[okey]--;
        }
        else {
          this.allSumPrice[okey]++;
        }
      },
      openMask(oval,obool){
        this.sData.produstDetail.freeListArrInit();
        let nowWinHight = m$.hiddenScroll(oval);
        //console.log(nowWinHight)
        //console.log(this.productData.isCake)
        // console.log(oval)
        // console.log(this.productData.isCake)
        if (this.productData.isCake&&oval==true) {
          this.allSumPrice.init();
          //遮罩层
          this.windowHeight = nowWinHight;
          this.getAjax(this.sData.url.InfoByValueId,{"specificationValueId":this.selectData.id},
            (res)=> {
              this.isOpenMask = false;
              this.alertData=res.data;
              console.log(this.alertData);
              this.sData.produstDetail.freeListArr[4].title=this.alertData[0].tableware;
              this.sData.produstDetail.freeListArr[0].notice='请输入'+(this.alertData[0].words)+'个字以内的文字';
              this.sData.produstDetail.freeListArr[0].length=(this.alertData[0].words);
            })
        }else if(obool==false){
          console.log('111');
          this.isOpenMask = true;
          let newObj={};
          newObj['englishName']=this.productData.englishName;
          newObj['id']='';
          newObj['productId']=this.productData.id;
          newObj['name']=this.productData.name;
          newObj['isCake']=this.productData.isCake;
          newObj['number']=this.allSumPrice.num;
          newObj['specification']=this.selectData.id;
          newObj['remark']='净含量:'+this.selectData.name+this.productData.specification;
          this.postAjax(this.sData.url.saveCart,{
            userId:this.sData.userId,
            productId:newObj.productId,
            specificationId:newObj.specification,
            number:newObj.number,
            remark:newObj.remark,
          },(res)=>{
            //this.isOpenMask = true;
            console.log(res)
          });
          this.carNumber = true;
          let that = this;
          setTimeout(function(){
            that.carNumber = false;
            that.carNum += newObj['number'];
          },500)
        }else if(obool == true){
          this.isOpenMask = true;
          let newObj={};
          newObj['englishName']=this.productData.englishName;
          newObj['id']='';
          newObj['productId']=this.productData.id;
          newObj['name']=this.productData.name;
          newObj['isCake']=this.productData.isCake;
          newObj['number']=this.allSumPrice.num;
          newObj['specification']=this.selectData.id;
          newObj['img']=this.productData.img;
          newObj['remark']='净含量:'+this.selectData.name+this.productData.specification;
          let othis = this;
          let money = 0;
          this.productData.productSpecifications.forEach(function(item){
            console.log("钱钱钱");
            console.log(item.price);
            money +=item.price;
          })
          newObj['price']=money;

          newObj['price']=this.allSumPrice.allCalculate();
          newObj['singlePrice'] = Number(this.allSumPrice.price).toFixed(2);
          newObj['proPrice'] = this.allSumPrice.calculate();
          newObj['toolPrice'] = this.allSumPrice.toolCalculate();




          m$.localStrages.set('orderItemBeans',[newObj]);
          m$.localStrages.set('couponId','');
          m$.localStrages.set('addressId','');
          this.$router.replace({name:'sureOrder'});
        }else if(oval==false&&obool=='close'){
          //console.log('关闭吧');
          this.isOpenMask = true;
        }
        this.nextFnStatue=obool;
      },
      checkStutusChange(oindex){
        if(oindex>=6){
          this.sData.produstDetail.cakeToolTitle.checked=!this.sData.produstDetail.cakeToolTitle.checked;
        }
        else {
          let freelist=this.sData.produstDetail.freeListArr;

          if(freelist[oindex].checked==false){
            if(oindex==1){
              freelist[oindex+1].checked=false;
            }
            else if(oindex==2){
              freelist[oindex-1].checked=false;
            }
            freelist[oindex].checked=true;
          }
          else {
            freelist[oindex].checked=false;
          }

        }
      },
      // selectSize(osizeIndex){
      //   this.allSumPrice.price=this.productData.productSpecifications[osizeIndex].price;
      //
      //   this.specificationId = this.productData.productSpecifications[osizeIndex].id;
      // },
      getData(oproductId){
        this.getAjax(this.sData.url.productDetail,
          {productId: oproductId},
          (res)=> {
            if(res.status==200){
              m$.template({
                val:'加载完成',
                time:1000
              })
              this.productData = res.data ? res.data : '';
              console.log(this.productData);
              this.bannerurl = this.productData.productImages;
              //如果只有一张图片则不进行轮播
              if(this.bannerurl.length != 1){
                setTimeout(function(){
                  var mySwiper1 = new Swiper('.banner-wrap .swiper-container', {
                    direction: 'horizontal',
                    autoplay: 2000,
                    //effect : 'coverflow',
                    speed: 500,
                    pagination: '.swiper-pagination',
                    paginationClickable:true,
                    autoplayDisableOnInteraction : false,//每次手滑动后自动播放
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    loop: true
                  });
                },10);
              }
              
              if(this.$route.params.size){
                let othis = this;
                this.productData.productSpecifications.forEach(function(item,idx){
                  if(item.name == othis.$route.params.size){
                    othis.selectData=othis.productData.productSpecifications[idx];
                    
                  }
                })  
              }else if (this.productData.productSpecifications.length) {
                this.selectData=this.productData.productSpecifications[0];
              }
              if(this.selectData.specification){
                this.selectData = this.selectData;
              }else{
                this.selectData.specification = '';
              }
            }
          })
      },
      sureNext(){
        let newObj={};
        newObj['englishName']=this.productData.englishName;
        newObj['id']='';
        newObj['productId']=this.productData.id;
        newObj['name']=this.productData.name;
        newObj['isCake']=this.productData.isCake;
        newObj['number']=this.allSumPrice.num;
        if(this.sData.produstDetail.cakeToolTitle.checked){
          console.log('钱出来啦');
          newObj['price']=this.allSumPrice.allCalculate();
          newObj['singlePrice'] = Number(this.allSumPrice.price).toFixed(2);
          newObj['proPrice'] = this.allSumPrice.calculate();
          newObj['toolPrice'] = this.allSumPrice.toolCalculate();
        }
        else {
          newObj['price']=this.allSumPrice.calculateNotTool();
          newObj['singlePrice'] = Number(this.allSumPrice.price).toFixed(2);
          newObj['proPrice'] = this.allSumPrice.calculate();
          newObj['toolPrice'] = this.allSumPrice.toolCalculate();
        }
        var templateData=this.sData.produstDetail.freeListArr;
        let ostring = ""+this.selectData.name+''+this.productData.specification;
        for(var i=0;i<templateData.length;i++){
          if(templateData[i].checked){
            if(i==4){
              if(templateData[i].title&&(templateData[i].title).length>3){
                ostring+='/赠送'+(templateData[i].title).substring(1,(templateData[i].title).length);
              }
            }
            else {
              ostring+='/'+templateData[i].span+''+templateData[i].val;
            }

          }
        }
        if(this.sData.produstDetail.cakeToolTitle.checked){
          var ofString="";
          var opString="";
          if(this.allSumPrice.candleNum>0){
            ofString='/星星蜡烛:X'+this.allSumPrice.candleNum;
          }
          if(this.allSumPrice.forkNum>0){
            opString='/另购刀叉盘:X'+this.allSumPrice.forkNum;
          }
          ostring+=ofString+opString;
        }
        newObj['remark']=ostring;
        newObj['specification']=this.selectData.id;
        newObj['specificationValue']=this.selectData.name;
        newObj['img']=this.productData.img;
        newObj['sizeName']=this.productData.specification;
        newObj['toolPrice'] = this.allSumPrice.toolCalculate();
        //数字选择后是否填写
        if(templateData[2].checked){
          if(templateData[2].val>0){
            //购物车飞入效果
            this.carNumber = true;
            let that = this;
            setTimeout(function(){
              that.carNumber = false;
              that.carNum += newObj['number'];
            },500)
            
            if(this.nextFnStatue==false){
              console.log('发请求');
              this.postAjax(this.sData.url.saveCart,{
                userId:this.sData.userId,
                productId:newObj.productId,
                specificationId:newObj.specification,
                number:newObj.number,
                remark:newObj.remark,
                toolPrice:newObj.toolPrice
              },(res)=>{
                this.isOpenMask = true;
                //console.log(res)
              })
            }else {
              m$.localStrages.set('orderItemBeans',[newObj]);

              m$.localStrages.set('couponId','');
              m$.localStrages.set('addressId','');
              this.$router.replace({name:'sureOrder'});
            }
          }else{
            m$.template({
              val:'请填写数字蜡烛的数字',
              time:1200
            })
          }
        }else{
          console.log('没选数据');
          //购物车飞入效果
          this.carNumber = true;
          let that = this;
          setTimeout(function(){
            that.carNumber = false;
            that.carNum += newObj['number'];
          },500)

          if(this.nextFnStatue==false){
            console.log('发请求');
            this.postAjax(this.sData.url.saveCart,{
              userId:this.sData.userId,
              productId:newObj.productId,
              specificationId:newObj.specification,
              number:newObj.number,
              remark:newObj.remark,
              toolPrice:newObj.toolPrice
            },(res)=>{
              this.isOpenMask = true;
              //console.log(res)
            })
          }else {
            m$.localStrages.set('orderItemBeans',[newObj]);
            console.log('存起来');
              console.log(newObj);
            m$.localStrages.set('couponId','');
            m$.localStrages.set('addressId','');
            this.$router.replace({name:'sureOrder'});
          }
        }
        
        // this.openMask(true,false);

      }
    },
    beforeDestroy (){
      m$.hiddenScroll(false);
    },
    watch:{
// 'bannerurl':function (art) {
//   if(art){
//     this.bannerFn();
//   }

// },
      'selectData':function (val) {
        this.allSumPrice.price=val.price;
      }
    },
    beforeDestroy(){
      m$.hiddenScroll(false);
    },
    created(){
      console.log(this.sData);
      document.title = this.sData.produstDetail.title;
      this.getData(this.$route.params.productId);
      //this.bannerFn();
    }
  }
</script>
<style scoped lang="less">
@import "productDetail.less";
</style>
